<template>
  <div class="create-order-container">
    <h1>发布跑腿订单</h1>
    <form class="order-form" @submit.prevent="submitOrder">
      <div class="form-group">
        <label for="title">订单标题</label>
        <input
          type="text"
          id="title"
          v-model="orderForm.title"
          placeholder="请输入订单标题"
        >
        <div v-if="errors.title" class="error-message">{{ errors.title }}</div>
      </div>
      <div class="form-group">
        <label for="type">订单类型</label>
        <select id="type" v-model="orderForm.type">
          <option value="">请选择订单类型</option>
          <option value="food">外卖代拿</option>
          <option value="express">快递代取</option>
          <option value="other">其他代办</option>
        </select>
        <div v-if="errors.type" class="error-message">{{ errors.type }}</div>
      </div>
      <div class="form-group">
        <label for="pickup_location">取货地点</label>
        <input
          type="text"
          id="pickup_location"
          v-model="orderForm.pickup_location"
          placeholder="请输入取货地点"
        >
        <div v-if="errors.pickup_location" class="error-message">{{ errors.pickup_location }}</div>
      </div>
      <div class="form-group">
        <label for="delivery_location">送货地点</label>
        <input
          type="text"
          id="delivery_location"
          v-model="orderForm.delivery_location"
          placeholder="请输入送货地点"
        >
        <div v-if="errors.delivery_location" class="error-message">{{ errors.delivery_location }}</div>
      </div>
      <div class="form-group">
        <label for="description">订单描述</label>
        <textarea
          id="description"
          v-model="orderForm.description"
          placeholder="请详细描述订单需求"
          rows="5"
        ></textarea>
        <div v-if="errors.description" class="error-message">{{ errors.description }}</div>
      </div>
      <div class="form-group">
        <label for="price">订单价格</label>
        <input
          type="number"
          id="price"
          v-model="orderForm.price"
          placeholder="请输入订单价格"
          min="0.01"
          step="0.01"
        >
        <div v-if="errors.price" class="error-message">{{ errors.price }}</div>
      </div>
      <button type="submit" class="submit-btn" :loading="isLoading" :disabled="isLoading">
        <i v-if="isLoading" class="el-icon-loading"></i>
        发布订单
      </button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { errandApi } from '@/api'
import { ElMessage } from 'element-plus'

const router = useRouter()
const orderForm = ref({
  title: '',
  type: '',
  pickup_location: '',
  delivery_location: '',
  description: '',
  price: ''
})
const isLoading = ref(false)
const errors = ref({})

// 表单验证
const validateForm = () => {
  let isValid = true
  errors.value = {}

  if (!orderForm.value.title.trim()) {
    errors.value.title = '订单标题不能为空'
    isValid = false
  }

  if (!orderForm.value.type) {
    errors.value.type = '请选择订单类型'
    isValid = false
  }

  if (!orderForm.value.pickup_location.trim()) {
    errors.value.pickup_location = '取货地点不能为空'
    isValid = false
  }

  if (!orderForm.value.delivery_location.trim()) {
    errors.value.delivery_location = '送货地点不能为空'
    isValid = false
  }

  if (!orderForm.value.description.trim()) {
    errors.value.description = '订单描述不能为空'
    isValid = false
  } else if (orderForm.value.description.length < 10) {
    errors.value.description = '订单描述至少10个字符'
    isValid = false
  }

  if (!orderForm.value.price || orderForm.value.price <= 0 || orderForm.value.price > 1000) {
    errors.value.price = '价格必须在0.01-1000之间'
    isValid = false
  }

  return isValid
}

// 提交订单
const submitOrder = async () => {
  // 验证表单
  if (!validateForm()) {
    return
  }

  isLoading.value = true
  try {
    await errandApi.createOrder(orderForm.value)
    ElMessage.success('订单创建成功！')
    // 跳转回跑腿首页
    setTimeout(() => {
      router.push({ name: 'errand' })
    }, 1500)
  } catch (error) {
    ElMessage.error('创建订单失败，请稍后重试')
    console.error('创建订单失败:', error)
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.create-order-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.order-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  font-size: 16px;
}

.error-message {
  color: #f56c6c;
  font-size: 14px;
  margin-top: 4px;
}

.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #f56c6c;
}

.submit-btn {
  padding: 12px 24px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #3aa876;
}
</style>